<script lang="ts">
import { defineComponent } from "vue";
import { AppData } from "@/utils/app";

export default defineComponent({
  props: {
    position: { type: String, default: "fixed" }, // sticky
    title: String,
    color: { type: String, default: "#333333" },
    background: { type: String, default: "transparent" },
    zIndex: { type: Number, default: 96 },
  },
  setup() {
    const rectData = AppData.rectData;
    return {
      statusBarHeight: rectData.statusBarHeight,
      navBarHeight: rectData.navBarHeight,
      menuButtonWidth: rectData.menuButtonWidth,
      menuButtonRight: rectData.menuButtonRight,
    };
  },
});
</script>

<template>
  <view class="nav-bar" :style="{ position, background, zIndex }">
    <view
      class="nav-bar-status"
      :style="{ height: `${statusBarHeight}px` }"
    ></view>
    <view class="nav-bar-wrapper" :style="{ height: `${navBarHeight}px` }">
      <text class="nav-bar-title" :style="{ color }">{{ title }}</text>
      <view
        class="bar-nav-menu"
        :style="{ paddingRight: `${menuButtonWidth + menuButtonRight}px` }"
      >
        <slot />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.nav-bar {
  left: 0;
  top: 0;
  width: 100vw;
  transition: all 0.3s ease-in-out;

  .nav-bar-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .nav-bar-title {
    max-width: 160px;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .bar-nav-menu {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }
}
</style>